<template>
  <div class="welcome">
    <div class="columns">
      <div class="column is-one-third">
        <div style="margin: 15px; width: 50%">
          <vs-input v-model="value" placeholder="登录享用搜索功能">
            <template #icon>
              <i class="bx bxs-search"></i>
            </template>
          </vs-input>
        </div>
      </div>

      <div class="column is-one-third" style="width: 40vmax">
        <div class="box">
          <h2 class="title" style="width:430px;margin:0 auto"><img src="..\assets\newlogo.png"/></h2>
          <div style="padding: 1px"></div>
<!--          <h6 class="subtitle is-6">登录开始学习</h6>-->
          <div style="margin: 5%">
            <vs-button
                gradient
                block
                @click="registerActive = !active"
                style="height: 40px; font-size: 16px"
            >注册
            </vs-button>
            <br/>
            <vs-button
                flat
                block
                @click="loginActive = !active"
                style="height: 40px; font-size: 16px"
            >登录
            </vs-button>
          </div>
          <vs-dialog blur v-model="registerActive">
            <template #header>
              <h1 class="not-margin">
                <b>注册</b>
              </h1>
            </template>
            <vs-alert dark v-model="alertActive">
              <template #title> 无效的输入！</template>
              {{ alertContent }}
            </vs-alert>
            <div class="con-form">
              <vs-input v-model="email">
                <template #icon> @</template>
                <template v-if="!validEmail && email !== ''" #message-danger>
                  无效的邮箱地址
                </template>
              </vs-input>
              <vs-input type="password" v-model="pass">
                <template #icon>
                  <i class="bx bxs-lock"></i>
                </template>
              </vs-input>
              <div class="flex">
                <vs-checkbox v-model="read">我已阅读用户须知</vs-checkbox>

                <vs-button
                    transparent
                    @click="active=!active"
                >
                  用户须知
                </vs-button>

                <vs-dialog scroll overflow-hidden  auto-width v-model="active">
                  <template #header>
                    <h2><b>
                      计算机网络知识图谱网站用户须知
                   </b> </h2>
                  </template>
                  <div class="con-content">
                    <p style="text-align:justify">
                      在注册使用网站服务前，请您务必审慎阅读本须知，特别是其中与用户信息保护和共享、风险与免责、争议解决相关的条款。在确认已完全充分理解并同意使用相关产品或服务后，您可以勾选“我已阅读并同意《用户须知》”并点击“注册”的方式完成注册程序，成为本网站用户。若您不同意本须知内容，应立即停止注册，并退出注册页面。
                    </p>
                    <br>

                    <h3><b>
                      第一条 网站基本信息及主要服务
                    </b></h3>
                    <br>

                    <p style="text-align:justify">
                      1、计算机网络知识图谱网站（下称“网站”）是由东华大学计算机学院开发，通过知识图谱的形式，旨在为计算机网络学习者提供学习、实践平台的网站。
                    </p>

                    <p style="text-align:justify">
                      2、网站仅作为一般学习者了解相关知识的媒介，网站并不保证相关知识的权威性、时效性。网站提醒专业研究者参考更权威的信息来源。
                    </p>
                    <br>
                    <h3><b>
                      第二条 注册要求
                    </b></h3>
                    <br>

                    <p style="text-align:justify">
                      3、您在网站注册时须按照网站的要求提供必要的信息或材料。您须保证注册和使用网站服务过程中所提供的一切信息和材料真实、准确、完整、合法，且不侵犯任何主体的合法权益，否则不得使用网站服务。网站有权基于单方独立判断，在认为您出现违反上述约定情形时，采取删除或屏蔽您发布的信息，立即暂停或注销账户，限制或禁止使用网站服务等措施。
                     </p>
                     <p style="text-align:justify">
                      4、您提交注册申请后，网站有权对您提供的信息和材料进行审查，并据此最终决定是否接受您的注册申请。
                      </p>
                     <p style="text-align:justify">
                      5、在注册和使用网站服务期间，您应根据本网站的要求提供和更新真实资料和信息，并保证在注册之时起至使用本网站期间，所提交的资料和信息真实、准确、完整、合法、有效，如有变更，应及时更新，如因您未能及时更新资料或信息产生的法律责任和后果由您自行承担。
                     </p>
                     <p style="text-align:justify">
                      6、在注册和使用网站服务期间，实际操作人员登录网站后，应根据相关页面的操作说明或与网站签署的其他协议等使用相关系统功能。
                       </p>
                     <p style="text-align:justify">
                      7、您确认知悉，网站将依据相关协议或其他有关文件和规则对您在网站中提交的操作指令进行处理。您未能及时对操作指令进行修改、确认所引起的任何纠纷或损失均由您自行负责，我方不承担任何责任。
                    </p>
                    <br>
                    <h3><b>
                      第三条 用户名和密码安全
                    </b></h3>
                    <br>
                    <p style="text-align:justify">
                      8、您注册成功后，须妥善保管用户名和密码，不得将账户以转让、出租、出借等任何方式提供给他方使用。凡使用用户名和密码成功登陆后在网站上所作的一切操作，均视为您的操作，所产生的电子信息记录均为您行为的有效凭据，以及由此产生的所有法律后果均由您自行承担。网站对您的用户名或密码遗失、被盗等所产生的后果不承担任何责任。
                     </p>
                     <p style="text-align:justify">
                      9、您应审慎设置和保管密码，并应：
                       <br>
                      9.1 避免使用与您明显相关的数字作为密码；
                       <br>
                     9.2 申请我方代为注册的，收到初始登录密码后，在首次登录网站时重新设置登录密码；
                      <br>
                     9.3 定期更换密码并牢记；
                      <br>
                      9.4 在设备上输入密码时，防止旁人或不安全设备窥视；
                     <br>
                     9.5 发现密码泄露、被盗、遗忘等情况，及时办理密码重置手续。
                     </p>
                      <br>
                    <h3><b>
                      第四条 暂停和注销账户
                    </b></h3>
                    <br>
                    <p style="text-align:justify">
                      11、您若发现有未经授权的人员冒用或盗用账户及密码，或其他任何未经合法授权使用网站服务的情形，应立即修改账号密码并妥善保管，如有必要，应立即通过发送邮件或拨打客服电话等方式联系网站，便于网站及时采取合理、必要手段协助您。网站对您的请求采取行动需要合理期限和程序，在此之前，网站对任何人员使用网站服务所导致的损失不承担任何责任。同时，您须理解即使及时采取了合理、必要手段，也并非确定能够防止您出现损失。
                      <br>
                      12、您在注册成功后使用网站服务时，应严格遵守所有适用的法律法规及相关协议，保证在网站中所填报、发布的信息合法合规且不侵犯任何其他主体的合法权益。网站有权基于单方独立判断，在认为您出现违反上述约定情形的，可以删除或屏蔽您发布的信息，立即暂停或注销您的账户，限制或禁止您使用网站服务等。您应自行承担违反上述法律法规或相关协议所产生的责任和损失，并赔偿由此造成您的所有损失。
                      <br>
                      13、网站有权基于单方独立判断，在认为可能发生危害您合法利益情形时，不经通知而先行暂停、中断或终止向您提供网站服务，且无需对您或任何其他主体承担任何责任。
                      <br>
                      14、您账户的暂停或注销不代表您责任的终止，您仍应对使用网站服务期间的行为承担相关责任，包括但不限于可能的违约或损害赔偿责任，同时网站仍可保有您的相关信息。
                     </p>
                      <br>
                    <h3><b>
                      第五条 知识产权
                    </b></h3>
                    <br>
                    <p style="text-align:justify">
                      15、除另有约定外，网站的所有文本、图片、动画、视频及其他信息的所有权利（包括但不限于版权、商标权、专利权、商业秘密及其他相关权利）均归网站所有。除非经网站事先书面同意，您不得以任何形式向任何其他主体公开发表、传输、复制或以其他方式使用网站提供的全部或部分信息，不得更改、虚化或删除任何署名、商标、版权标识和/或其他权利声明。
                     <br>
                     16、您不得对网站软件系统程序（包括但不限于源程序、目标程序、软件文档等）进行反向工程、反向编译、反汇编或以其他方式尝试发现本系统的源代码；不得复制、修改、编译、整合、篡改、传播与网站软件系统相关的材料等侵犯网站合法权利的行为，否则网站有权追究相关责任。
                    </p>
                                          <br>
                    <h3><b>
                      第六条 用户注册须知的组成和修订
                    </b></h3>
                    <br>
                    <p style="text-align:justify">
                      17、网站有权根据其业务发展、法律法规和行业监管规定变化等，不时对用户注册须知进行必要修订，该等修改包括但不限于网站服务模式发生重大变化，如处理您信息的目的、信息的使用方式等；网站在控制权、组织架构、内部合作模式、合作对象等方面发生重大变化；您信息共享、转让或公开披露的主要对象发生变化；网站负责处理用户信息安全的责任部门、联络方式及投诉渠道发生变化；等。
                     如发生上述变化，网站将通过网站公告等其他合理方式进行发布。您应随时关注并阅读最新版的须知及网站公告。您应通过网站提供的合理方式确认是否接受协议修改内容；若您不同意所修改的内容，应当立即停止使用本网站相关服务；若您在协议修订后继续使用网站服务，视为您同意并接受修改后的协议。网站运营方通过本网站发布的通知、公告、声明或其他类似的内容是本协议的组成部分。
                    </p>
                  </div>
                </vs-dialog>
              </div>
            </div>
            <template #footer>
              <div class="footer-dialog">
                <vs-button block @click="register"> 注册</vs-button>
                <div class="new">
                  已有账号？
                  <input type="button" @click="loginOpen" value="登录"/>
                </div>
              </div>
            </template>
          </vs-dialog>
          <vs-dialog blur v-model="loginActive">
            <template #header>
              <h1 class="not-margin">
                <b>登录</b>
              </h1>
            </template>
            <div class="con-form">
              <vs-input v-model="email" label-placeholder="邮箱地址">
                <template #icon> @</template>
              </vs-input>
              <vs-input type="password" v-model="pass" label-placeholder="密码">
                <template #icon>
                  <i class="bx bxs-lock"></i>
                </template>F
              </vs-input>
<!--              <div class="flex">-->
<!--                <vs-checkbox v-model="remember">记住我</vs-checkbox>-->
<!--              </div>-->
            </div>
            <template #footer>
              <div class="footer-dialog">
                <vs-button block @click="login">登录</vs-button>
                <div class="new">
                  没有账号？<input
                    type="button"
                    @click="registerOpen"
                    value="创建一个"
                />
                </div>
              </div>
            </template>
          </vs-dialog>
        </div>
      </div>
    </div>
    <footer class="footer" style="background-color: #404040a0;position:absolute">
      <div class="content has-text-centered">
        Made by DHU-CST.网络工程2018级专业实习. Copyright © 2021
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      active: false,
      input1: '',
      input2: '',
      checkbox1: false,

      email: "",
      pass: "",
      VerRes: "",
      registerActive: false,
      loginActive: false,
      remember: false,
      read: false,
      alertActive: false,
      alertContent: [
        {
          id: 1,
          show: false,
          content: "无效的邮箱地址。",
        },
        {
          id: 2,
          show: false,
          content: "无效的用户名。",
        },
        {
          id: 3,
          show: false,
          content: "无效的密码。",
        },
      ],
    };
  },
  computed: {
    validEmail() {
      return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email);
    },
  },
  methods: {
    registerOpen() {
      this.loginActive = false;
      this.email = "";
      this.pass = "";
      this.username = "";
      this.invite = "";
      this.registerActive = true;
    },
    loginOpen() {
      this.registerActive = false;
      this.email = "";
      this.pass = "";
      this.username = "";
      this.invite = "";
      this.loginActive = true;
    },
    async register() {
      if (this.email == "") {
        this.$vs.notification({text: "邮箱不能为空"});
        return;
      }
      if (this.pass == "") {
        this.$vs.notification({text: "密码不能为空"});
        return;
      }
      // let res = await this.$http.post("/api/post/register");
      let res = await this.$http.post("api/2backcode/user/regist", {
        "userName": this.email,
        "password": this.pass
      });
      // console.log(res.data)
      if (res.data.admin == 0) {
        this.$vs.notification({
          duration: "3000",
          progress: "auto",
          title: "注册成功！",
          text: "即将转到登录界面。",
        });
        this.loginOpen();
      }
    },
    async login() {
      if (this.email == "" || this.pass == "") {
        return;
      }
      const data = new FormData()
      data.append("userName", this.email)
      data.append("password", this.pass)
      let res = await this.$http.post("api/2backcode/user/login", data);
      console.log(res.data)
      if (res.data != false) {
        localStorage.setItem("email", JSON.stringify(res.data.id));
        localStorage.setItem("uname",JSON.stringify(res.data.userName));
        this.$vs.notification({
          title: "登录成功！",
        });
        this.go();
      }
    },
    go() {
      this.$router.push("/mid");
    },
  },
};
</script>

<style scoped>
.welcome {
  background: url("../assets/WallPaper.jpeg") no-repeat;
  background-size: cover;
  min-height: calc(100vh);
  overflow: hidden;
}

.box {
  margin-top: 50%;
  text-align: center;
  background-color: #ffffffa8;
}
</style>
<style>
/* 这里是全局 Style vuesax 的 css style 必须放到全局 style 中 */
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 5px;
}

.con-form {
  width: 100%;
}

.con-form .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.con-form .flex a {
  font-size: 8px;
  opacity: 0.7;
}

.con-form .flex a :hover {
  opacity: 1;
}

.vs-checkbox-label {
  font-size: 8rem;
}

.vs-input-content {
  margin: 10px 0px;
  width: calc(100%);
}

.vs-input-content .vs-input {
  width: 100%;
}

.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
}

.footer-dialog .new {
  margin: 0px;
  margin-top: 5px;
  padding: 0px;
  font-size: 8px;
}

.footer-dialog .new input {
  margin-left: 6px;
  background-color: transparent;
  border: 0px;
  color: #195bff;
  font-size: 8px;
}

.footer-dialog .new input:hover {
  color: black;
}

.vs-button {
  margin: 10px 0px;
}

.vs-dialog {
  min-width: 330px;
}

.footer {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  padding: 8px !important;
  font-size: 5px;
  color: white;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
  Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}


</style>
